<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-04-11 16:08:12
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-04-11 19:55:22
 * @FilePath: \vue-project\src\views\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { useUserStore } from '@/pinia/useUser';
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus'
const router = useRouter()
//创建user仓库
const useUser = useUserStore()
//获取登录信息
const loginInfo = ref({
    username: '',
    password: ''
})
//注册登录事件
const login = async () => {
    try {
        await useUser.userLogin(loginInfo.value)
        router.push('/')
        ElNotification({
            message: 'This is a success message',
            type: 'success'
        })
    } catch (error) {
        ElNotification({
            type: 'error',
            message: (error as Error).message
        })
    }
}
</script>

<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form">
                    <h1>Hello</h1>
                    <h2>欢迎来到硅谷甄选</h2>
                    <el-form-item>
                        <el-input prefix-icon="User" color="red" v-model="loginInfo.username">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="loginInfo.password" prefix-icon="Clock"
                            :show-password="true"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login_btn" type="primary" size="default" @click="login">点击登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>



<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;

    .login_form {
        position: relative;
        width: 80%;
        top: 30vh;
        background: url('@/assets/images/login_form.png') no-repeat;
        background-size: cover;
        padding: 40px;

        h1 {
            color: white;
            font-size: 40px;
        }

        h2 {
            font-size: 20px;
            color: white;
            margin: 20px 0px;
        }

        .login_btn {
            width: 100%;
        }
    }
}
</style>